<template>
  <div id="main_div">
    <el-card style="width: 500px;height: 400px;margin: 50px auto">
      <h1>欢迎登录</h1>
      <el-form label-width="100px" style="margin-top: 50px">
        <el-form-item label="账号">
          <el-input v-model="user.username" placeholder="请输入注册时填写的手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" type="password " placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item style="color: blue;float: right">
          <span>忘记密码？</span>
        </el-form-item>
        <br>

        <el-button @click="login()" type="primary">登录</el-button>
        <br>

        <router-link to="/reg">没有账号，现在去注册！</router-link>


      </el-form>
    </el-card>
  </div>

</template>

<script setup>
import {ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";



const user = ref({username:'',password:''});



const login = ()=>{
  let data = qs.stringify(user.value);
  axios.post('http://localhost:8080/v1/users/login',data)
  .then((Response)=>{
    if(Response.data.code==2001){
      ElMessage.success("登录成功");
      let user = Response.data.data;
      localStorage.setItem('user',JSON.stringify(user));
      router.push('/select')
    }else {
      ElMessage.error(Response.data.msg);
    }
  })
}






</script>

<style scoped>
#main_div{
  overflow: hidden;
  height: 500px;
  /*background-image: url("/public/imgs/loginbg.gif");*/
  background-size: cover;/*设置封面尺寸*/
  background-position: center;/*设置背景图片居中*/
}
</style>
